<template>
  <!-- 柱状图 - 统计近6个月发布的文章数 - 具备高宽的 DOM 容器 -->
  <div ref="main" :class="className" :style="{height: height, width: width}"></div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // 引入主题
import resize from './mixins/resize' // 自适应窗口的大小改变图表大小

export default {
  mixins: [resize], // 自适应窗口的大小改变图表大小
  props: { // 接收父组件传值
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    xAxisData: {
      // x轴显示的数据
      type: Array,
      default: () => ['2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07']
    },
    seriesData: { // 柱状图中接收的数据
      type: Array,
      default: () => [10, 521, 200, 334, 390, 330]
    }
  },
  data() {
    return {
      chart: null // 引用 echarts 实例属性
    }
  },
  mounted() {
    // 当加载 dom 后，会调用 this.initChart() 来初始化 echarts 实例
    // 先有 dom 再初始化，这样更安全
    this.$nextTick(() => {
      this.initChart()
    })
  },
  // 当组件销毁之前会调用此钩子
  beforeDestroy() {
    if (!this.chart) {
      return // 如果为空，直接返回
    } // 注销实例
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // 关于图表的初始化配置
    initChart() {
      // 初始化实例，第2个参数指定引用的主题
      this.chart = echarts.init(this.$refs.main, 'macarons') // 主题作为第二个参数传入
      // 图标配置项
      this.chart.setOption({
        title: { // 标题
          text: '近6个月发布的文章数',
          left: 'center'
        },
        tooltip: {
          // 提示框(鼠标放上出现的提示信息框）
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: { // 柱状图整体位置
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [ // x轴
          {
            type: 'category', // 固定名字
            data: this.xAxisData, // 引用 x 轴数据
            axisTick: {
              alignWithLabel: true // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
            }
          }
        ],
        yAxis: [ // y 轴
          {
            type: 'value' // 动态显示比较数值
          }
        ],
        series: [
          {
            name: '发布数',
            type: 'bar', // 柱状图
            barWidth: '60%', // 每个柱子宽度
            data: this.seriesData // 引用柱状图中接收的数据
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
</style>
